<script setup lang="ts">
import { usePlayerStore } from '@/stores/playerStore'
import { useFavoriteStore } from '@/stores/favoriteStore'
const playerStore = usePlayerStore()
const favoriteStore = useFavoriteStore()
interface IProps {
  prevSong(): void
  nextSong(): void
  currentSong: ISongItem | undefined
  canPlay: boolean
}
const props = defineProps<IProps>()
function togglePlay() {
  if (!props.canPlay) {
    return
  }
  playerStore.playing = !playerStore.playing
}
</script>

<template>
  <div class="play-controller" @click.stop>
    <i :class="['iconfont', playerStore.playModeIcon]" @click.stop="playerStore.setPlayMode" />
    <i class="iconfont icon-prev" :class="props.canPlay ? '' : 'disable'" @click="props.prevSong" />
    <i
      :class="[
        'iconfont',
        playerStore.playing ? 'icon-pause' : 'icon-play',
        props.canPlay ? '' : 'disable'
      ]"
      @click="togglePlay"
    />
    <i class="iconfont icon-next" :class="props.canPlay ? '' : 'disable'" @click="props.nextSong" />
    <i
      :class="['iconfont', favoriteStore.favoriteIcon(currentSong)]"
      :style="favoriteStore.favoriteColor(currentSong, '#d93f30')"
      @click="favoriteStore.toggleFavorite(currentSong)"
    />
  </div>
</template>

<style scoped lang="scss">
.play-controller {
  padding-bottom: 20px;
  display: flex;
  height: 60px;
  i {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $color-theme;
    font-size: 34px;
    &:nth-child(3) {
      font-size: 50px;
    }
    &.disable {
      opacity: 0.3;
    }
  }
}
</style>
